<template>
    <div class="diceBox">
        <div
            class="dice"
            :class="{ hasRotate: hasRotate, show: showDice }"
            :style="{
                transform: diceTransform,
                animationDelay: animateDelay + 'ms',
            }"
        >
            <div
                class="face flex items-center justify-center"
                v-for="(item, index) in diceItem"
                :key="index"
                :class="{
                    front: item === 1,
                    back: item === 6,
                    top: item === 5,
                    bottom: item === 2,
                    left: item === 4,
                    right: item === 3,
                }"
            >
                <template v-if="item === 1">
                    <div class="dot red"></div>
                </template>
                <template v-else-if="item === 6">
                    <div class="row">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                    <div class="row">
                        <div class="hideDot"></div>
                    </div>
                    <div class="row">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                </template>
                <template v-else-if="item === 5">
                    <div class="row">
                        <div class="dot"></div>
                        <div class="hideDot"></div>
                        <div class="dot"></div>
                    </div>
                    <div class="row">
                        <div class="dot"></div>
                    </div>
                    <div class="row">
                        <div class="dot"></div>
                        <div class="hideDot"></div>
                        <div class="dot"></div>
                    </div>
                </template>
                <template v-else-if="item === 2">
                    <div class="row">
                        <div class="dot"></div>
                        <div class="hideDot"></div>
                        <div class="dot"></div>
                    </div>
                </template>
                <template v-else-if="item === 4">
                    <div class="row">
                        <div class="dot red"></div>
                        <div class="hideDot"></div>
                        <div class="dot red"></div>
                    </div>
                    <div class="row">
                        <div class="hideDot"></div>
                    </div>
                    <div class="row">
                        <div class="dot red"></div>
                        <div class="hideDot"></div>
                        <div class="dot red"></div>
                    </div>
                </template>
                <template v-else-if="item === 3">
                    <div class="row">
                        <div class="dot"></div>
                        <div class="hideDot"></div>
                        <div class="hideDot"></div>
                    </div>
                    <div class="row">
                        <div class="hideDot"></div>
                        <div class="dot"></div>
                        <div class="hideDot"></div>
                    </div>
                    <div class="row">
                        <div class="hideDot"></div>
                        <div class="hideDot"></div>
                        <div class="dot"></div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref, defineExpose } from "vue"
import _ from "lodash"
const diceItem = ref([1, 2, 3, 4, 5, 6])

const randomNumber = () => {
    return _.random(1, 6) as number
}
const rotateMap = [
    {
        rotateX: 0,
        rotateY: 0,
    },
    {
        rotateX: 90,
        rotateY: 0,
    },
    {
        rotateX: 180,
        rotateY: 90,
    },
    {
        rotateX: 0,
        rotateY: 90,
    },
    {
        rotateX: 270,
        rotateY: 0,
    },
    {
        rotateX: 0,
        rotateY: 180,
    },
]
const showDice = ref(false)
const hasRotate = ref(false)
const diceTransform = ref("rotateX(0deg) rotateY(0deg)")
const animateDelay = ref(Math.random() * 500)
const rotate = () => {
    return new Promise((resolve) => {
        if (hasRotate.value) return
        animateDelay.value = Math.random() * 500
        showDice.value = true
        setTimeout(() => {
            // 骰子落下1s后 开始旋转
            const value = randomNumber()
            console.log("value", value)
            const target = rotateMap[value - 1] // 目标位置
            hasRotate.value = true
            diceTransform.value = `rotateX(${target.rotateX + 360 * 2}deg) rotateY(${target.rotateY + 360 * 2}deg)`
            setTimeout(() => {
                // 骰子旋转2s 停止1s后返回结果
                hasRotate.value = false
                diceTransform.value = `rotateX(${target.rotateX}deg) rotateY(${target.rotateY}deg)`
                resolve(value)
            }, 3000)
        }, 1000)
    })
}

const handleHideDice = () => {
    showDice.value = false
}

defineExpose({
    rotate,
    handleHideDice,
})

onMounted(() => {
    //console.log('挂载完成');
})
onUnmounted(() => {
    //console.log('卸载之后');
})
</script>

<style lang="scss" scoped>
.diceBox {
    width: 20vmin;
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(-20deg);
    .dice {
        position: relative;
        width: 20vmin;
        height: 20vmin;
        transform-style: preserve-3d;
        // 初始位置在屏幕外
        top: -100vh;
        &.hasRotate {
            transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        &.show {
            animation: show 0.5s ease-out forwards;
            @keyframes show {
                0% {
                    top: -100vh;
                }
                80% {
                    top: 10vmin;
                }
                100% {
                    top: 0;
                }
            }
        }

        .face {
            position: absolute;
            width: 18vmin;
            height: 18vmin;
            background-image: linear-gradient(45deg, rgb(9, 5, 18, 0.8), rgb(85, 1, 186, 0.95));
            border-radius: 1vmin;
            box-shadow: 0 0 1vmin rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.1);
            .row {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            .dot {
                width: 3vmin;
                height: 3vmin;
                background-image: linear-gradient(45deg, rgb(255, 255, 255, 0.4), rgb(255, 255, 255, 0.9));
                border-radius: 50%;
                margin: 1vmin;

                &.red {
                    background-image: linear-gradient(45deg, rgb(193, 39, 45, 0.2), rgb(193, 39, 45, 0.9));
                }
            }

            .hideDot {
                width: 3vmin;
                height: 3vmin;
                margin: 1vmin;
                opacity: 0;
            }

            &.front {
                transform: translateZ(9vmin);
            }

            &.back {
                transform: rotateY(180deg) translateZ(9vmin);
            }

            &.top {
                transform: rotateX(90deg) translateZ(9vmin);
            }

            &.bottom {
                transform: rotateX(-90deg) translateZ(9vmin);
            }

            &.left {
                transform: rotateY(-90deg) translateZ(9vmin);
            }

            &.right {
                transform: rotateY(90deg) translateZ(9vmin);
            }
        }
    }
}
</style>
